<!doctype html>
<html>
	<head>
    		<script src="phaser.min.js"></script>
    		<style>
    			body{margin:0}
    		</style>
    		<script type="text/javascript">
			window.onload = function() {
				// here we define a new 640x480 game, with three core functions:
				// onPreload to be executed when the game preloads
				// onCreate to be executed once the game is firstly created
				// onUpdate to be called every time the game us updated
				var text;
				var logo;
				var data = {};
				data.lives = 3;
				var gameState = {};
				var game = new Phaser.Game(640,480,Phaser.AUTO,"",{preload:onPreload, create:onCreate, update:onUpdate});

				
				// THE GAME IS PRELOADING
				function onPreload() {
					game.load.image('logo', 'data/images/BattleCity.png');
					game.load.tilemap("map1", "data/maps/map1.json", null, Phaser.Tilemap.TILED_JSON);
					game.load.image("tile", "data/images/tile.png", 32, 32);
					game.load.image('tankAll', 'data/images/tankAll.png');
					game.load.image('IP', 'data/images/ip.png');
					game.load.image('misc', 'data/images/Misc.png');

				}
				
				// THE GAME HAS BEEN CREATED
				function onCreate() {
					game.state.start('start');return false;
					logo = game.add.sprite(game.world.centerX - 120, game.world.centerY - 144, 'logo');
					text = game.add.text(game.world.centerX, game.world.centerY , "Start Game", { font: "24px Arial", fill: "white", align: "center" });
					text.anchor.set(0.5);
					text.inputEnabled = true;
					text.events.onInputDown.add(startGame, this);

				}
				
				// THE GAME IS GOING TO BE UPDATED
				function onUpdate() {

	    		};

	    		function startGame () {
	    			game.add.tween(logo).to({y: -164}, 2400, Phaser.Easing.Linear.None, true);
	    			var t = game.add.tween(text).to({y: -20}, 2400, Phaser.Easing.Linear.None, true);
	    			t.onComplete.add(function() {
	    				game.state.start('start');
	    			});
	    		}

	    		gameState.onStart = function() {}
	    		gameState.onStart.prototype = {
	    			preload : function() {
    					this.stage.backgroundColor = Phaser.Color.getColor(192, 192, 192);
	    			},

	    			create : function() {
	    				map = game.add.tilemap("map1");
	    				map.addTilesetImage('tile');
	    				//原始地图中的bg1层
	    				var layer1 = map.layer;
	    				//创建新的层，使用远层的大小
	    				layer = map.createLayer('bg1', layer1.heightInPixels, layer1.heightInPixels);
	    				layer.position.x = game.world.width / 8;
	    				layer.fixedToCamera = false;
	    				layer.context.fillStyle = "#0000000"; 
	    				//重新设定宽度和高度，使高度满足对其
					    var scale = game.world.height/ layer.height;
					    layer.scale.set(scale, scale);
					    
					    var ipField = game.add.sprite(20*2, 50*2, 'IP');
					    //ipField.scale.set(2.0);

					    var ipLifeIcok = game.add.tileSprite(0,0, 32, 32, "tankAll");
					    ipLifeIcok.scale.set(0.6);    
    					ipLifeIcok.position.set(30, 60*2);  
    
    					var text = data.lives;
    					var style = { font: "18px Arial", fill: "#000000", align: "center" };

    					var t = game.add.text(55, 60*2,  text, style); 

    					//添加小旗子
    					var flageIcon = game.add.tileSprite(0, 0, 32, 32, 'misc');
    					flageIcon.tilePosition.set(16*32, 0);
    					flageIcon.position.set(game.world.width-50, 100*2);
	    			},

	    			update : function() {
	    				
	    			}
    				
	    		}

	    		game.state.add('start', gameState.onStart);
	    	};
		</script>
    </head>
    <body>
    </body>
</html>